<template>
	<view class="trendPage">
		
		<u-calendar v-model="show" mode="range" @change="getTime"></u-calendar>
		<view class="trendTop">
			<view>
				<text v-if="!startTime">- -</text>
				{{startTime}} 
				<text class="trendDivde">/</text>
				<text v-if="!endTime">- -</text>
				{{endTime}}
			</view>
			<text @click="show = true">请选择时间段</text>
		</view>
		<!-- 折线Line纯数字-->
		<view class="line">
			<line-chart canvasId="index_line_2" :dataAs="lineData2" :extraAs="extraAs" :basicAs="basicAs"/>
		</view>
	</view>
</template>

<script>
import LineChart from '@/components/stan-ucharts/LineChart.vue';
export default {
	name: 'Index',
	components: {
		LineChart
	},
	data() {
		return {
			"show":false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			startTime:'',
			endTime:'',
			basicAs:{
				"colors":["#eb5a57"],
				"legend":{
					show:false
				}				
			},
			extraAs:{
				"extra":{
					"line":{
						"type":"curve"
					}
				}
			},
			lineData2: {
				//数字的图--折线图数据
				categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
				series: [
					{ name: '成交量A', data: [35, 8, 25, 37, 4, 20]}
				]
			},
		}
	},
	methods: {
		getTime(time){
			let [start,end] = [time.startDate,time.endDate]
			this.startTime = start
			this.endTime = end
		}
	},
	created() {}
};
</script>

<style scoped>
.arcbar {
	display: flex;
}
.trendTop{
	padding:15px;
	display: flex;
	justify-content: space-between;
}
.trendDivde{
	margin:auto 5px;
}
</style>
